//导入 eslint 语法检查的工具
const ESLintPlugin = require('eslint-webpack-plugin');
//导入打包 html 的工具
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入抽离 css 插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//压缩 css 插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    //入口
    entry: './src/js/app.js',
    //出口
    output: {
        path: __dirname + '/../build',            //设置文件夹的路径  『绝对路径』
        filename: 'js/bundle.js',                //文件的路径
        clean: true,
        publicPath: '/'
    },
    //模式
    mode: 'production',
    //loader配置
    module: {
        //配置所有的 loader
        rules: [
            // css 的 loader 配置
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',  //后边的先执行  将css文件转为 commonJS 模块
                    'postcss-loader',
                ]
            },
            // less 的 loader 配置
            {
                test: /\.less$/, //  1.aless   
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader', //将 less 语法转化为 css 语法
                ]
            },
            //babel 语法转换
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage',  // 按需引入(需要使用polyfill)
                                    corejs: { version: 3 }
                                }
                            ]
                        ]
                    }
                }
            },
            //针对图片的处理
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset", //asset 资产
                //解析器
                parser: {
                    //转base64的条件
                    dataUrlCondition: {
                        maxSize: 8 * 1024, // 8kb   阈值
                    }
                },
                //生成文件
                generator: {
                		//打包保存的文件名称
                    filename: 'images/[hash:6][ext]',
                },
            },
            //针对图片处理
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            //针对字体文件处理
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,  
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[hash:6][ext]',
                },
            }
        ]
    },
    //配置插件
    plugins: [
        new ESLintPlugin(),
        new HtmlWebpackPlugin({
            template: "./src/index.html",// 指定html模板文件。
            inject: "body",// 将打包生成的JS文件放置在body尾部
            hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
            minify: {
                removeAttributeQuotes: true,// 移除属性中的双引号
                removeComments: true,// 移除注释
                collapseWhitespace: true,// 去除空格与换行
            }
        }),
        new MiniCssExtractPlugin({					
            filename: "css/[hash:8].css",
        }),
    ],

    
    optimization: {
        minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
        
    },
}


